<template>
  <view>
    <view class="ge2"></view>

    <view class="ding">
      <view class="kk_ding">
        <view class="kk_ding_nei">
          <view class="tx">
            <image style="width: 100%;height: 100%" :src="detail.snapshoot.store_info.logo"></image>
          </view>
          <view class="name">{{ detail.snapshoot.store_info.name }}</view>
          <view></view>
        </view>

        <view class="qx">待消费</view>
      </view>

      <view class="kk_zhong">
        <view class="zhong_tx">
          <image style="width: 100%;height: 100%" :src="detail.snapshoot.cover"></image>
        </view>
        <view>
          <view class="zhong_h1">{{ detail.snapshoot.name }}</view>

          <view class="zhong_nk">
            <view>下单时间：</view>
            <view>{{ detail.create_time }}</view>
          </view>

          <view class="zhong_nk">
            <view>消费时段：</view>
            <view>{{ detail.start_time }} 至 {{ detail.end_time }}</view>
          </view>

          <view class="zhong_nk">
            <view>预定时段：</view>
            <view>{{ detail.start_time }} 至 {{ detail.end_time }}</view>
          </view>

          <view class="zhong_h1">总计 ￥{{ detail.price }}</view>
        </view>
      </view>
    </view>

    <view class="zhong">
      <view class="zhong_text">
        <view>订单总金额</view>
        <view>{{ detail.pay_price }}</view>
      </view>

      <view class="zhong_text">
        <view>会员优惠</view>
        <view>0</view>
      </view>

      <view class="zhong_text">
        <view>在线支付</view>
        <view>{{ detail.pay_price }}</view>
      </view>

      <view class="zhong_text2">
        <view>实付款</view>
        <view>￥{{ detail.pay_price }}</view>
      </view>
    </view>

    <view class="ge2"></view>

    <view class="zhong">
      <view class="zhong_text2">订单信息</view>
      <view class="zhong_text3">
        <view>订单编号</view>
        <view class="bh">{{ detail.order_no }}</view>
        <view class="fz" @tap="copyone(detail.order_no)">复制</view>
      </view>

      <view class="zhong_text3">
        <view>创建时间</view>
        <view class="bh">{{ detail.create_time }}</view>
      </view>
    </view>

    <view class="ge2"></view>

    <view class="kk_di">
      <view class="di_qx saomakm" @tap="open_damen(detail.id,detail.order_no)">
        <view>开大门</view>
      </view>

      <view class="di_qx saomakx" @tap="open_bxmen(detail.id,detail.order_no)">
        <view>开包厢</view>
      </view>

      <view class="di_qx saomakx" @tap="start_xf(detail.id,detail.order_no)">
        <view>开始消费</view>
      </view>

    </view>
  </view>

</template>

<script>
// pages/dingdanxiangqing/yiwancheng.js
import {houseordercancelOrder, houseorderdetails, houseorderopenDoor, startOrdersEarly} from "@/common/api";

export default {
  data() {
    return {
      detail: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
    this.getorderdetails(options.id)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 开始消费
    start_xf(id, no) {
      let _this = this
      uni.showModal({
        title: "非预订时间内订单，确定提前消费吗",
        success: function (ures) {
          if (ures.confirm) {
            _this.tiqianxiaofei(id)
          } else {

          }
        }
      });
    },
    // 提前消费
    tiqianxiaofei(id) {
      uni.showLoading({
        title: '操作中...'
      });
      startOrdersEarly({
        order_id: id
      }, res => {
        uni.hideLoading();
        uni.showModal({
          title: res.data.msg,
          showCancel: false
        });
      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })
    },
    // 开大门
    open_damen(id, no) {
      uni.showLoading({
        title: '操作中...'
      });
      houseorderopenDoor({
        order_id: id,
        order_no: no,
        onclick: '1'
      }, res => {
        uni.hideLoading();
        uni.showModal({
          title: res.data.msg,
          showCancel: false
        });
      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })
    },
    // 开包厢
    open_bxmen(id, no) {
      let _this = this
      uni.showLoading({
        title: '操作中...'
      });
      houseorderopenDoor({
        order_id: id,
        order_no: no,
        onclick: '2'
      }, res => {
        uni.hideLoading();
        console.log('houseorderopenDoor', res)
        if (res.data.code == 201) {
          uni.showModal({
            title: res.data.msg,
            success: function (ures) {
              if (ures.confirm) {
                _this.tiqianxiaofei(id)
              }
            }
          });
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false
          });
        }

      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })

    },
    // 获取详情
    getorderdetails(id) {
      houseorderdetails({
        order_id: id
      }, res => {
        this.detail = res.data.data
        console.log('order_id', res)
      })
    },
    // 复制
    copyone: function (copydata) {
      uni.setClipboardData({
        data: copydata, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            duration: 2000,
            mask: true // 设置为true，使背景半透明
          })
        }
      })
    },

    delone: function () {

    }
  }
};
</script>
<style>
.ding {
  border-bottom: 1rpx solid rgba(129, 129, 129, 0.363);
}

.kk_ding {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 32rpx;
  margin-left: 20rpx;
}

.kk_ding_nei {
  display: flex;
  margin-right: 300rpx;
  align-items: center;
  font-weight: bold;
}

.tx {
  width: 50rpx;
  height: 50rpx;
  background-color: white;
  border-radius: 50%;
  margin-right: 10rpx;
}

.qx {
  color: rgb(143, 143, 143);
}

.kk_zhong {
  display: flex;
  margin: 20rpx 0rpx 20rpx 0rpx;
  padding: 0 0 0 40rpx;
}

.zhong_tx {
  width: 130rpx;
  height: 130rpx;
  background-color: blue;
  margin-right: 10rpx;
  border-radius: 5px; /* 圆角设置为20px */
}

.zhong_nk {
  display: flex;
  color: rgb(129, 129, 129);
  font-size: 27rpx;
  line-height: 2;
}

.zhong_h1 {
  font-weight: bold;
  font-size: 31rpx;
  margin-bottom: 10rpx;
}

.zhong {
  padding: 40rpx;
  color: rgb(104, 104, 104);
}

.zhong_text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.zhong_text2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: bold;
}

.zhong_text3 {
  display: flex;
  margin-bottom: 40rpx;
  margin-top: 50rpx;
  font-size: 28rpx;
}

.bh {
  margin-left: 40rpx;
  margin-right: 10rpx;
}

.fz {
  background-color: rgba(224, 224, 224, 0.377);
  font-size: 25rpx;
  padding: 3rpx 7rpx 3rpx 7rpx;
  border-radius: 4px; /* 圆角设置为20px */
}

.kk_di {
  display: flex;
  justify-content: flex-end;
  font-size: 30rpx;
  margin: 40rpx 20rpx 30rpx 0;
}

.di_qx {
  border: 1px solid rgb(175, 175, 175);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 30rpx;
}

.di_jx {
  background-color: rgb(126, 212, 155);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 20rpx;
  color: rgb(255, 255, 255);
}

.zhong_text3 {
  display: flex;
  margin-bottom: 40rpx;
  margin-top: 50rpx;
  font-size: 28rpx;
}

.bh {
  margin-left: 40rpx;
  margin-right: 10rpx;
}

.fz {
  background-color: rgba(224, 224, 224, 0.377);
  font-size: 25rpx;
  padding: 3rpx 7rpx 3rpx 7rpx;
  border-radius: 4px; /* 圆角设置为20px */
}

.kk_di {
  display: flex;
  justify-content: flex-end;
  font-size: 30rpx;
  margin: 40rpx 0rpx 30rpx 0;
}

.di_qx {
  border: 1px solid rgb(175, 175, 175);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 30rpx;
}

.di_jx {
  background-color: rgb(126, 212, 155);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 20rpx;
  color: rgb(255, 255, 255);
}

.saomakm {
  background-color: rgb(75, 148, 1);
  color: rgb(255, 255, 255);
}

.saomakx {
  background-color: chocolate;
  color: rgb(255, 255, 255);
}

.tongdian {
  background-color: rgb(167, 51, 51);
  color: rgb(255, 255, 255);
}

.duandian {
  background-color: rgba(77, 40, 40, 0.747);
  color: rgb(255, 255, 255);
}
</style>
